<template>
	<!-- 客服跳转 -->
	<!-- #ifdef APP-PLUS || H5 -->
	<view class="acea-row row-center-wrapper cartf iconfont icon-ic_customerservice" :style="{ top: top + 'px' }" @touchmove.stop.prevent="setTouchMove" @click="customer"></view>
	<!-- #endif -->
	

	<!-- #ifdef MP-WEIXIN -->
	<view v-if="sys_service_data.type == 1">
	
		<button v-if="type == 1" @click="customer()" class="display-flex-column display-flex-align-center display-flex-justify-center">
			<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
			<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-top:'+textTop+'px'"> {{text}}</text>
		</button>
		<button v-else @click="customer()" class="display-flex display-flex-align-center display-flex-justify-center">
			<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
			<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-left:'+textLeft+'px'"> {{text}}</text>
		</button>
	</view>
	<view v-else-if="sys_service_data.type == 2">
		<view v-if="type == 1" @click="customer()" class="display-flex-column display-flex-align-center display-flex-justify-center">
			<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
			<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-top:'+textTop+'px'"> {{text}}</text>
		</view>
		<view v-else @click="customer()" class="display-flex display-flex-align-center display-flex-justify-center">
			<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
			<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-left:'+textLeft+'px'"> {{text}}</text>
		</view>
	</view>
	<view v-else-if="sys_service_data.type == 3">
		<view v-if="type == 1" @click="customer()" class="display-flex-column display-flex-align-center display-flex-justify-center">
			<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
			<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-top:'+textTop+'px'"> {{text}}</text>
		</view>
		<view v-else @click="customer()" class="display-flex display-flex-align-center display-flex-justify-center">
			<image  v-if="show_icon":src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
			<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-left:'+textLeft+'px'"> {{text}}</text>
		</view>
	</view>
	<view v-else-if="sys_service_data.type == 4">
		<view v-if="type == 1" @click="customer()" class="display-flex-column display-flex-align-center display-flex-justify-center">
			<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
			<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-top:'+textTop+'px'"> {{text}}</text>
		</view>
		<view v-else @click="customer()" class="display-flex display-flex-align-center display-flex-justify-center">
			<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
			<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-left:'+textLeft+'px'"> {{text}}</text>
		</view>
	</view>
	<view v-else-if="sys_service_data.type == 5">
		<view v-if="storeInfo">
			<button
			 v-if="type == 1" 
			 :send-message-title="storeInfo.store_name"
			 :send-message-img="storeInfo.image"
			 :send-message-path="storeInfo.kefu_url"
			 show-message-card
			 open-type="contact"
			 class="display-flex-column display-flex-align-center display-flex-justify-center"
			 >
				<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
				<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-top:'+textTop+'px'"> {{text}}</text>
			</button>
			<button
			 v-else 
			 :send-message-title="storeInfo.store_name"
			 :send-message-img="storeInfo.image"
			 :send-message-path="storeInfo.kefu_url"
			 show-message-card
			open-type="contact"
			 class="display-flex display-flex-align-center display-flex-justify-center"
			 >
				<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
				<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-left:'+textLeft+'px'"> {{text}}</text>
			</button>
		</view>
		<view v-else>
			<button v-if="type == 1"open-type="contact" class="display-flex-column display-flex-align-center display-flex-justify-center">
				<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
				<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-top:'+textTop+'px'"> {{text}}</text>
			</button>
			<button v-else open-type="contact" class="display-flex display-flex-align-center display-flex-justify-center">
				<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
				<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-left:'+textLeft+'px'"> {{text}}</text>
			</button>
		</view>
	</view>
	
	<!-- #endif -->
	<!-- #ifdef MP-BAIDU -->
	<button v-if="type == 1" open-type="contact" class="display-flex-column display-flex-align-center display-flex-justify-center">
		<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
		<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-top:'+textTop+'px'"> {{text}}</text>
	</button>
	<button v-else open-type="contact" class="display-flex display-flex-align-center display-flex-justify-center">
		<image v-if="show_icon" :src="icon" :style="'width:'+size+'px;'+'height:'+size+'px'"></image>
		<text v-if="text"  :style="'font-size:'+textSize+'px;'+'margin-left:'+textLeft+'px'"> {{text}}</text>
	</button>
	<!-- #endif -->
	<!-- #ifdef MP-ALIPAY -->
	<view class="" style="width: 100%;text-align: center;">
		<contact-button tnt-inst-id="ysB_PVJW" scene="SCE01315837" color="#acabab" :size="size" :icon="icon" >
		</contact-button>	
	</view>
	<!-- #endif -->
</template>

<script>

let app = getApp();
import { getCustomer } from '@/utils';
import { mapGetters } from 'vuex';
export default {
	name: 'kefuIcon',
	props: {
		show_icon:  {
			type: Boolean,
			default: true,
		},
		icon: {
			type: String,
			default: 'https://qiniu.gzyxly.cn/def/b5b90202411052224108293.png'
		},
		size: {
			type: Number,
			default: 20
		},
		ids: {
			type: Number,
			default: 0
		},
		routineContact: {
			type: Number,
			default: 0
		},
		storeInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		goodsCon: {
			type: Number,
			default: 0
		},
		text: {
			type: String,
			default: ''
		},
		textSize: {
			type: Number,
			default: 14
		},
		textTop: {
			type: Number,
			default: 0
		},
		textLeft: {
			type: Number,
			default: 0
		},
		// 1竖排客服 2横排客服
		type:{
			type: Number,
			default: 1
		},

	},
	computed: mapGetters(['userInfo']),
	data: function () {
		return {
			top: '480',
			sys_service_data: app.globalData.sys_service_data
		};
	},
	mounted() {
		// #ifdef H5
		this.top = parseFloat(window.innerHeight) - 200;
		// #endif
	},
	methods: {
		customer() {
			let url = `/pages/chat/customer_list/chat?productId=${this.ids}`;
			getCustomer(app.globalData.sys_service_data, url);
		},
		setTouchMove(e) {
			let that = this;
			if (e.touches[0].clientY < 480 && e.touches[0].clientY > 66) {
				that.top = e.touches[0].clientY;
			}
		},
		licks() {
			let userInfo = {};
			if (typeof this.userInfo === 'string') {
				userInfo = JSON.parse(this.userInfo);
			} else {
				userInfo = this.userInfo;
			}
			let url = `/pages/chat/customer_list/chat?productId=${this.ids}`;
			this.$util.getCustomer(userInfo, url);
		}
	},
	created() {}
};
</script>

<style lang="scss">
.cartf {
	width: 96rpx;
	height: 96rpx;
	background: #ffffff;
	box-shadow: 0 3rpx 16rpx rgba(0, 0, 0, 0.08);
	border-radius: 50%;
	font-size: 47rpx;
	color: #666;
	position: fixed;
	right: 15rpx;
	z-index: 9;
}
</style>
